<template>
	<view class="box">
		<view class="bg_img"></view>

		<view class="cont">
			<view class="headerbox">
				<image src="../../static/logo.png" mode="" style="width: 110rpx;height: 60rpx;"></image>
				<view style="width: 50%;">
					<up-input placeholder="任务标题、编号" prefixIcon="search" shape="circle" border="none" style="background-color: rgb(254,143,30);padding: 10rpx 22rpx;"
						prefixIconStyle="font-size: 22px;color: #eee" placeholderStyle="color: #F8C57F" color="#fff"></up-input>
				</view>
				<image src="../../static/home/B.png" class="rotate-x-image" mode="" style="width: 56rpx;height: 56rpx;"></image>
				<view style="color: #fff;">
					立赚27元
				</view>
			</view>
			
			<view class="sixbox">
				<view class="six_inner" v-for="(item,index) in 6">
					<view class="six_header">
						<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 100%;"></image>
						<image src="../../static/home/ding.png" mode="widthFix" style="width: 30rpx;height: 40rpx;margin: 10rpx;"></image>
						<image src="../../static/home/bao.png" mode="widthFix" style="width: 30rpx;height: 40rpx;"></image>
					</view>
					<view class="six_title">
						小手术东方闪电发送到发
					</view>
					<view class="six_info">
						<p>试玩 | 豆豆趣玩</p>
						<p style="margin-top: 6rpx;">23487人已领取</p>
					</view>
					<view class="six_money">
						+6.08元
					</view>
				</view>
			</view>
			
			<view class="mid_menu">
				<view class="menubox">
					<view style="display: flex;align-items: center;">
						<view class="menu_item" v-for="item in 6">
							<image src="../../static/home/B.png" mode="" style="width: 90rpx;height: 90rpx;border-radius: 100%;"></image>
							<view style="margin-top: 10rpx;white-space: nowrap;font-size: 28rpx;">
								新人福利
							</view>
						</view>
					</view>					
				</view>
				<view class="notice">
					<up-notice-bar :text="noticetext" mode="link" color="#FF8000" bgColor="#fff"></up-notice-bar>
				</view>
			</view>
			
			<view class="listbox">
				<view class="list_title">
					<view class="item">
						<image src="../../static/home/money.png" mode="" style="width: 50rpx;height: 50rpx;border-radius: 100%;margin-right: 10rpx;"></image>
						<view class="changcolor">
							推荐赚钱
						</view>
					</view>
					<view class="item">
						<view>
							新人新单
						</view>
						<up-icon name="arrow-right" color="#ccc" size="16"></up-icon>
					</view>
				</view>
				<view class="list_item" v-for="item in 10">
					<image src="../../static/home/B.png" mode="" style="width: 80rpx;height: 80rpx;border-radius: 100%;"></image>
					<view class="itembox">
						<view class="top_item">
							<view style="width: 70%;display: flex;align-items: center;">
								<view class="oneline" style="width: 85%;">关注公众号，秒过关注公众号，秒过关注公众号，秒过</view>
								<image src="../../static/home/ding.png" mode="widthFix" style="width: 30rpx;height: 40rpx;margin: 10rpx;"></image>
							</view>
							<view style="width: 30%;text-align: right;color: #d00;font-weight: bold;">
								+23.88元
							</view>							
						</view>
						<view class="btm_item">
							<view style="width: 85%;display: flex;align-items: center;">
								<view style="padding: 2rpx 10rpx;background-color: #ccc;margin-right: 10rpx;">下载</view>
								<view class="oneline" style="width: 60%;">3211人已领取 | 剩余数：75</view>
							</view>
							<image src="../../static/home/red_moeny.png" mode="" style="width: 50rpx;height: 50rpx;border-radius: 100%;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		provide,
		reactive,
		toRaw,
		inject
	} from 'vue';
	let title = ref('111')
	
	let noticetext = ref('广播数据广播数据广播数据广播数据广播数据广播数据广播数据')
</script>

<style lang="scss" scoped>
	@import 'home.scss'
</style>